import React, { useState } from 'react';
import logo from './logo.svg';
import Hello from './components/Hello';
import LikeButton from './components/LikeButton';
import MouseTracker from './components/MouseTracker';
import useMousePositions from './hooks/useMousePositions'
import useURLLoader from './hooks/useURLLoader'
import './App.css';

interface IShowResult {
  message: string;
  status: string
}
interface IThemeProps {
  [key: string]: {color: string; background: string}
}
const themes: IThemeProps = {
  'light': {
    color: '#000',
    background: '#eee'
  },
  'dark': {
    color: '#fff',
    background: '#222'
  }
}
export const ThemeContext = React.createContext(themes.light)
const App: React.FC = () => {
  const [show, setShow] = useState(true)
  const [data, loading] = useURLLoader('https://dog.ceo/api/breeds/image/random', [show])
  const [theme, setTheme] = useState(themes.dark)
  // 类型断言
  const dogResult = data as IShowResult
  // 引入自定义Hook
  const positions = useMousePositions()
  function handleChangeTheme() {
    if (theme === themes.dark) {
      setTheme(themes.light)
    } else {
      setTheme(themes.dark)
    }
  }
  return (
    <div className="App">
      <ThemeContext.Provider value={theme}>
        <header className="App-header">
          <button onClick={() => {handleChangeTheme()}}>切换主题</button>
          <img src={logo} className="App-logo" alt="logo" />
          <Hello />
          <p>
            X: {positions.x}, Y: {positions.y}
          </p>
          <button onClick={() => {setShow(!show)}}>重新读取狗子图片</button>
          {loading? <p>🐕加载中</p> : <img src={dogResult && dogResult.message} alt="狗子"/>}
          <LikeButton />
          {show && <MouseTracker />}
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </ThemeContext.Provider>
    </div>
  );
}

export default App;
